<template>
  <div>
    <div v-for="(item,index) in list" :key="index" class="li">
      <el-row>
        <el-col :span="6">
          套餐名称：<el-input
            placeholder="免费版本"
            class="ipt"
            v-model="item.name"
          ></el-input>
        </el-col>
        <el-col :span="5">
          原价：<el-input
            class="ipt"
            placeholder="1300"
            v-model="item.oldPrice"
          >
            <template #append>元</template>
          </el-input>
        </el-col>
        <el-col :span="5">
          时长：<el-input class="ipt" placeholder="12" v-model="item.month">
            <template #append>月</template>
          </el-input>
        </el-col>
        <el-col :span="5">
          套餐费用：<el-input class="ipt" placeholder="0" v-model="item.money">
            <template #append>元</template>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary"   :icon="item.id==1?Plus:Minus" @click="update(index)"></el-button>
          <el-button type="primary">权限</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-button type="primary">保存</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "taocan"
});
import { queryTaocan } from "@/api/platform/taocan.js";
import { ref, onMounted } from "vue";
import { Plus,Minus } from '@element-plus/icons-vue'

//定义列表数据
const list = ref([]);

//初始方法
function init() {
  queryTaocan().then(res => {
    if (res.code == 200) {
      list.value = res.data;
    }
  });
}

function update(index){
  if(index!=0){
    list.value.splice(index,1)
  }
}
//生命周期函数
onMounted(() => {
  init();
});
</script>
<style scope>
*{
  padding:0;
  margin:0
}
.ipt {
  width: 130px;
}
.li {
  margin-top: 10px;
}
.bottom{
  text-align:center;
  margin-top:20px
}
</style>
